<template>
	<!-- 收益记录 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="收益记录" />
		<view class="top">
			<input type="text" disabled v-model="selectedTime" placeholder="选择日期查看" @click="show=true" class="selectdate"/>
			<view class="profit">推广收益 <text>{{profit}}元</text></view>
		</view>
		<u-picker v-model="show" mode="time" @confirm="selectTime"></u-picker>
		<noData v-if="recordList.length===0" />
		<view class="record" v-for="(item,index) in recordList" :key="index" v-else>
			<view class="record_top">
				<view class="record_top_desc">邀请用户{{item.user_name}}成功注册</view>
				<view class="record_top_money">+￥{{item.price}}</view>
			</view>
			<view class="record_time">{{item.create_time}}</view>
		</view>
		<!-- 加载更多 -->
		<pullDownRefresh :status="loading" v-if="recordList.length>0" />
	</view>
</template>

<script>
	import pullDownRefresh from '@/components/pullDownRefresh'
	export default {
		components:{
			pullDownRefresh
		},
		data() {
			return {
				page:1,
				show:false,
				profit:'',//推广收益
				selectedTime:'',
				recordList:[],
				loading:0
			}
		},
		onLoad(options) {
			console.log(options);
			this.profit = options.profit;
			this.getRecordList();
		},
		onReachBottom() {
			this.page++;
			this.getRecordList();
		},
		methods: {
			getRecordList(){
				this.loading = 1;
				this.$api.sharerecord({
					offset:this.page,
					date:this.selectedTime
				}).then(res=>{
					if(res.length>0){
						this.loading = 0;
						this.recordList = this.recordList.concat(res);
					}else{
						this.loading = 3;
						// uni.showToast({
						// 	title:'没有更多了~',
						// 	icon:'none'
						// })
					}
				})
			},
			selectTime({day,month,year}) {
				this.selectedTime = year + '-' + month + '-' + day;
				this.page = 1;
				this.recordList = [];
				this.getRecordList();
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-top: calc(var(--status-bar-height) + 100rpx);
}
.top{
	padding: 40rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	
	input{
		text-align: center;
	}
	.selectdate{
		width: 360rpx;
		height: 70rpx;
		background: #FFFFFF;
		border: 2rpx solid #AAAAAA;
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.profit{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		
		text{
			color: #FF0000;
			margin-left: 10rpx;
		}
	}
}
.record{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
	margin: 0 30rpx 26rpx;
	
	&_top{
		@include between;
		
		&_desc{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		&_money{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF0000;
		}
	}
	&_time{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-top: 25rpx;
	}
}
</style>
